import React from 'react';
import {View, Text, StyleSheet, TouchableHighlight} from 'react-native';
import {withNavigation} from 'react-navigation';
import Storage from '../../deviceStorage';

function PublicHead(props) {
  const logout = async () => {
    await Storage.delete('token');
    await props.navigation.navigate('Overlay');
  };
  return (
    <View style={styles.container}>
      <Text style={styles.size}>{props.headerText}</Text>
      <TouchableHighlight onPress={logout} style={{  marginTop: 9, marginRight: 10, width: 80, height: 28}}>
        <Text style={styles.logout}>退出登录</Text>
      </TouchableHighlight>
    </View>
  );
}

export default withNavigation(PublicHead);

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 46,
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#53CAC4',
  },
  logout: {
    width: 80,
    color: '#fff',
    fontSize: 16,
    lineHeight: 28,
    borderWidth: 1,
    borderColor: '#eee',
    textAlign: 'center',
  },
  size: {
    width: 100,
    height: 46,
    fontSize: 18,
    textAlign: 'center',
    lineHeight: 46,
    color: '#fff',
    letterSpacing: 1,
  },
});
